<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { Divider } from '$components/basic';
	import Tab, { Label as TabLabel } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import { goto } from '$utils/intercept';

	let active = 'Home';
	let checked = false;

	const dispatcher = createEventDispatcher();

	let open = false;
	let clicked = 'Nothing yet.';

	export const openDialog = () => (open = true);

	let username = '';
	let password = '';

	const toLogin = () => {
		dispatcher('login', { username, password });
	};

	const toRegister = () => ((open = false), goto('/register'));
	const toForget = () => ((open = false), goto('/forget'));
</script>

<Dialog
	bind:open
	aria-labelledby="simple-title"
	aria-describedby="simple-content"
	container$class="items-start!"
	surface$class="w-500px max-w-100% mt-300px"
>
	<!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
	<Title id="simple-title">Login</Title>
	<Content id="simple-content">
		<form>
			<div class="flex flex-row items-center gap-10px">
				<Label for="username" class="w-80px">E-mail</Label><Textfield
					type="text"
					name="username"
					style="flex: 0.8"
					autocomplete="on"
					bind:value={username}
				/>
			</div>
			<div class="flex flex-row items-center gap-10px">
				<Label for="password" class="w-80px">Password</Label><Textfield
					style="flex: 0.8"
					type="password"
					name="password"
					autocomplete="off"
					bind:value={password}
				/>
			</div>
		</form>
	</Content>
	<Actions>
		<Button on:click={toLogin} variant="raised" defaultAction use={[InitialFocus]}>
			<Label>Log in</Label>
		</Button>
		<Checkbox bind:checked style="width: 20px; height: 20px" />
		<span class="font-size-10px"> Remember me </span>

		<!-- svelte-ignore a11y-click-events-have-key-events -->
		<!-- svelte-ignore a11y-missing-attribute -->
		<!-- svelte-ignore a11y-no-static-element-interactions -->
		<a class="mdc-button font-size-10px!" on:click={toRegister}>New Account</a>
		<span class="h-1em"><Divider direction="vertical" /></span>

		<!-- svelte-ignore a11y-click-events-have-key-events -->
		<!-- svelte-ignore a11y-missing-attribute -->
		<!-- svelte-ignore a11y-no-static-element-interactions -->
		<a class="mdc-button font-size-10px!" on:click={toForget}>Lost your password?</a>
		<div class="flex-1"></div>
	</Actions>
</Dialog>

<!-- <Button on:click={() => (open = true)}>
	<Label>Open Dialog</Label>
</Button> -->
